<template>
  <div class="news">
    <h1>新闻首页</h1>
    <ul>
      <li @click="get(item.newsId)" v-for="item in newslist" :key="item.newsId">
        <div class="news-item">
          <div class="news-left">
            <img :src="item.pic" />
          </div>
          <div class="news-right">
            <h3>{{item.title}}</h3>
            <div class="info">
              <span>{{item.time}}</span>
              <span>{{item.src}}</span>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
//引入数据json文件
import NewsList from "../assets/newslist.json";
export default {
  data() {
    return {
      newslist: NewsList.list,
    };
  },
  methods: {
    get(id) {
      //暂不懂
      this.$router.push({ name: "NewsInfo", params: { id } });
    },
  },
};
</script>
<style lang="scss" scoped>
.news {
    margin-left: -40px;
  h1 {
    text-align: center;
    font-size: 20px;
  }
  ul {
    list-style: none;
    margin-bottom: 40px;
    li {
      border-top: 1px solid #666;
      .news-item {
        display: flex;
        padding: 10px 0;
        .news-left {
          flex: 1;
          img {
            width: 100%;
            height: 80px;
          }
        }
        .news-right {
          margin-top: -20px;
          flex: 3;
          margin-left: 20px;
          display: flex;
            // row：横向从左到右排列（左对齐），默认的排列方式。
            // row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
            // column：纵向排列。
            // row-reverse：反转纵向排列，从后往前排，最后一项排在最上面。
          flex-direction: column;
          //两边对齐
          justify-content: space-between;
          h3 {
            font-size: 16px;
          }
          .info {
            font-size: 8px;
            color: #666;
            span:nth-child(2) {
              margin-left: 5px;
            }
          }
        }
      }
    }
  }
}
</style>
